<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSocket Chat Room</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-8 offset-md-2">
            <div class="card">
                <div class="card-header bg-primary text-white">WebSocket Chat Room</div>
                <div class="card-body">
                    <ul class="list-unstyled" id="messages"></ul>
                </div>
                <div class="card-footer">
                    <div class="input-group">
                        <input type="text" class="form-control" id="input" placeholder="Enter your message...">
                        <div class="input-group-append">
                            <button class="btn btn-primary" onclick="send()">Send</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    var socket = new WebSocket("ws://localhost:8080/chat");

    socket.onopen = function (event) {
        console.log("WebSocket connected");
    };

    socket.onclose = function (event) {
        console.log("WebSocket disconnected");
    };

    socket.onmessage = function (event) {
        var message = JSON.parse(event.data);
        var sender = message.sender;
        var content = message.content;
        var li = $("<li>").addClass("media my-2");
        var img = $("<img>").addClass("mr-3 rounded-circle").attr("src", "https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/assets/brand/bootstrap-solid.svg");
        var div = $("<div>").addClass("media-body").append($("<h5>").addClass("mt-0 mb-1").text(sender)).append(content);
        li.append(img).append(div);
        $("#messages").append(li);
    };

    function send() {
        var input = $("#input");
        var message = {
            sender: "Me",
            content: input.val()
        };
        socket.send(JSON.stringify(message));
        input.val("");
    }
</script>
</body>
</html>